<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="/css/home/style.css" rel="stylesheet" type="text/css" media="all"/>
<link href="/css/home/slider.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="/js/common/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/home/move-top.js"></script>
<script type="text/javascript" src="/js/home/easing.js"></script>
<script type="text/javascript" src="/js/home/startstop-slider.js"></script>
<script type="text/javascript" src="/js/home/home.js"></script>
</head>
<body>
  <div class="wrap">
	<div class="header">
		<div class="headertop_desc">
			<div class="call">
				 <p><span>客服电话:</span><span class="number">188-1412-7570</span></p>
			</div>
			<div class="account_desc">
				<ul>
					<li><a href="#">退出</a></li>
					<li><a href="#">Login</a></li>
					<li><a href="#">Delivery</a></li>
					<li><a href="#">Checkout</a></li>
					<li><a href="#">My Account</a></li>
				</ul>
			</div>
			<div class="clear"></div>
		</div>
		<div class="header_top">
			<div class="logo">
				<a href="/home/item.action?userId=${User.userId}&item=home"><img src="/images/picture/logo.jpg" style="width: 297px;height: 71px" alt="" /></a>
			</div>
			  <div class="cart">
			  	   <%--<p>Welcome to our Online Store! <span>Cart:</span><div id="dd" class="wrapper-dropdown-2"> 0 item(s) - $0.00
			  	   	<ul class="dropdown">
							<li>you have no items in your Shopping cart</li>
					</ul></div></p>--%>
				  <a href="/home/item.action?userId=${User.userId}&item=cart"><input type="button" class="input-button" value="去购物车结算"></a>
			  </div>
			  <script type="text/javascript">
			function DropDown(el) {
				this.dd = el;
				this.initEvents();
			}
			DropDown.prototype = {
				initEvents : function() {
					var obj = this;

					obj.dd.on('click', function(event){
						$(this).toggleClass('active');
						event.stopPropagation();
					});	
				}
			};
			var num=0;
			function lunbo() {
			    var div = $(".luobo");
				var imgdiv = div.find('img');
				    imgdiv.prop('src','${TopSalesList.get(0).goodsImage}');
                num++;
                if(num >= ${TopSalesList.size()}){
                    num=0;
                }

				<%--confirm(${CategoryList}.get(0).goodsId);--%>
            }
			$(function() {
                //setInterval(lunbo,2000);
				var dd = new DropDown( $('#dd') );

				$(document).click(function() {
					// all dropdowns
					$('.wrapper-dropdown-2').removeClass('active');
				});

			});

		</script>
	 <div class="clear"></div>
  </div>
	<div class="header_bottom">
	     	<div class="menu">
	     		<ul>
			    	<li class="active" id="go_home"><a href="/home/item.action?userId=${User.userId}&item=home">主页</a></li>
			    	<li id="go_cart"><a href="/home/item.action?userId=${User.userId}&item=cart">购物车</a></li>
			    	<li id="go_order"><a href="/home/item.action?userId=${User.userId}&item=order">我的订单</a></li>
			    	<li id="go_collection"><a href="/home/item.action?userId=${User.userId}&item=collection">我的收藏</a></li>
					<li id="go_info"><a href="/home/item.action?userId=${User.userId}&item=info">个人信息</a></li>
					<li id="go_address"><a href="/home/item.action?userId=${User.userId}&item=address">收货地址</a></li>
					<li id="go_complaint"><a href="/home/item.action?userId=${User.userId}&item=complaint">投诉</a></li>
					<li id="go_suggest"><a href="/home/item.action?userId=${User.userId}&item=suggest">建议</a></li>
					<li id="go_about"><a href="/home/item.action?userId=${User.userId}&item=about">关于</a></li>
					<div class="clear"></div>
     			</ul>
	     	</div>
	     	<div class="search_box">
	     		<form>
	     			<input id="keyword" type="text" value="Search" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}"><input onclick="listSearchGoods()" type="button" value="搜索">
	     		</form>
	     	</div>
	     	<div class="clear"></div>
	     </div>	     
	<div class="header_slide">
			<div class="header_bottom_left">				
				<div class="categories">
				  <ul>
				  	<h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品分类</h3>
					  <c:forEach items="${CategoryList}" var="category">
						  <li onclick="listCategoryGoods(${category.categoryId})">${category.name}</li>
					  </c:forEach>
				      <%--<li><a href="#">Mobile Phones</a></li>
				      <li><a href="#">Desktop</a></li>
				      <li><a href="#">Laptop</a></li>
				      <li><a href="#">Accessories</a></li>
				      <li><a href="#">Software</a></li>
				       <li><a href="#">Sports &amp; Fitness</a></li>
				       <li><a href="#">Footwear</a></li>
				       <li><a href="#">Jewellery</a></li>
				       <li><a href="#">Clothing</a></li>
				       <li><a href="#">Home Decor &amp; Kitchen</a></li>
				       <li><a href="#">Beauty &amp; Healthcare</a></li>
				       <li><a href="#">Toys, Kids &amp; Babies</a></li>--%>
				  </ul>
				</div>					
	  	     </div>
					 <div class="header_bottom_right">					 
					 	 <div class="slider">					     
							 <div id="slider">
			                    <div id="mover">
			                    	<div id="slide-1" class="slide">
									 <div class="slider-img">
									     <a href="/home/goodsDetail.action?goodsId=32&userId=${User.userId}" target="_blank"><img src="/images/picture/32.jpg" alt="learn more" /></a>
									  </div>
						             	<div class="slider-text">
		                                 <h2>清仓<br><span>低价出售</span></h2>
		                                 <h2>最低仅售半价</h2>
									   <div class="features_list">
									   	<h4>种类繁多 款式齐全 多快好省 质量保证 <br>您的放心之选!</h4>
							            </div>
							             <a href="/home/goodsDetail.action?goodsId=32&userId=${User.userId}" target="_blank" class="button">Shop Now</a>
					                   </div>			               
									  <div class="clear"></div>				
				                  </div>
						             <div class="slide">
						             		<div class="slider-text">
		                                 <h2>清仓<br><span>低价出售</span></h2>
		                                 <h2>最低仅售半价</h2>
									   <div class="features_list">
									   	<h4>种类繁多 款式齐全 多快好省 质量保证 <br>您的放心之选!</h4>
							            </div>
							             <a href="/home/goodsDetail.action?goodsId=33&userId=${User.userId}" target="_blank" class="button">Shop Now</a>
					                   </div>		
						             	 <div class="slider-img">
									     <a href="/home/goodsDetail.action?goodsId=33&userId=${User.userId}" target="_blank"><img src="/images/picture/33show.jpg" alt="learn more" /></a>
									  </div>						             					                 
									  <div class="clear"></div>				
				                  </div>
				                  <div class="slide">
					                  <div class="slider-img">
									     <a href="/home/goodsDetail.action?goodsId=34&userId=${User.userId}" target="_blank"><img src="/images/picture/34.jpg" alt="learn more" /></a>
									  </div>
									  <div class="slider-text">
		                                 <h2>清仓<br><span>低价出售</span></h2>
		                                 <h2>最低仅售半价</h2>
									   <div class="features_list">
									   	<h4>种类繁多 款式齐全 多快好省 质量保证 <br>您的放心之选!</h4>
							            </div>
							             <a href="/home/goodsDetail.action?goodsId=34&userId=${User.userId}" target="_blank" class="button">Shop Now</a>
					                   </div>	
									  <div class="clear"></div>				
				                  </div>
			                 </div>		
		                </div>
					 <div class="clear"></div>					       
		         </div>
		      </div>
		   <div class="clear"></div>
		</div>
   </div>
 <div class="main">
    <div class="content">
    	<div class="content_top">
    		<div class="heading">
    		<h3>商品展示</h3>
    		</div>
    		<div class="clear"></div>
    	</div>
	      <div class="section group" id="show_goods">
              <c:forEach items="${TopSalesList}" var="goods">
                  <div class="grid_1_of_4 images_1_of_4 display">
                      <a href="/home/goodsDetail.action?goodsId=${goods.goodsId}&userId=${User.userId}" target="_blank"><img src="${goods.goodsImage}" alt="" /></a>
                      <h2> ${goods.name} </h2>
                      <div class="price-details">
                          <div class="price-number">
                              <h5><span class="rupees">销售量：${goods.salesVolume}</span></h5>
                              <p><span class="rupees">￥${goods.price}</span></p>
                          </div>
                          <div class="add-cart">
                              </br>
                              <h4><a href="javascript:addToCart(${goods.goodsId})">加入购物车</a></h4>
                          </div>
                          <div class="clear"></div>
                      </div>
                  </div>
              </c:forEach>
			  <div class="goods_container">
				  <%--分类商品展示容器--%>
			  </div>
              <div class="grid_1_of_4 images_1_of_4 goods_model" style="display: none">
                  <a class="detail" href=""><img src="" alt="" /></a>
                  <h2></h2>
                  <div class="price-details">
                      <div class="price-number">
                          </br>
                          <p><span class="rupees"></span></p>
                      </div>
                      <div class="add-cart">
                          </br>
                          <h4><a class="to_Cart" href="">加入购物车</a></h4>
                      </div>
                      <div class="clear"></div>
                  </div>
              </div>
			</div>
		<%--隐藏域--%>
		<div style="display: none">
			<span><input id="current_page" type="text" value=""></span>
			<span><input id="per_page_num" type="text" value=""></span>
		</div>
		<br>
		<div id="page_container" style="margin-right: 0;padding-right: 0">
			<%--显示分页--%>
		</div>
		<div class="content_bottom">
    		<div class="heading">
    		<h3>最近浏览</h3>
    		</div>
    		<div class="clear"></div>
    	</div>
			<div class="section group">
				<c:forEach items="${ScanRecordGoodsList}" var="goods">
					<div class="grid_1_of_4 images_1_of_4">
						<a href="/home/goodsDetail.action?goodsId=${goods.goodsId}&userId=${User.userId}" target="_blank"><img src="${goods.goodsImage}" alt="" /></a>
						<h2> ${goods.name} </h2>
						<div class="price-details">
							<div class="price-number">
								</br>
								<p><span class="rupees">￥${goods.price}</span></p>
							</div>
							<div class="add-cart">
								</br>
								<h4><a href="javascript:addToCart(${goods.goodsId})">加入购物车</a></h4>
							</div>
							<div class="clear"></div>
						</div>
					</div>
				</c:forEach>
			</div>
    </div>
 </div>
</div>
   <div class="footer">
   	  <div class="wrap">	
	     <div class="section group">
				<div class="col_1_of_4 span_1_of_4">
						<h4>Information</h4>
						<ul>
						<li><a href="about.html">About Us</a></li>
						<li><a href="contact.html">Customer Service</a></li>
						<li><a href="#">Advanced Search</a></li>
						<li><a href="delivery.html">Orders and Returns</a></li>
						<li><a href="contact.html">Contact Us</a></li>
						</ul>
					</div>
				<div class="col_1_of_4 span_1_of_4">
					<h4>Why buy from us</h4>
						<ul>
						<li><a href="about.html">About Us</a></li>
						<li><a href="contact.html">Customer Service</a></li>
						<li><a href="#">Privacy Policy</a></li>
						<li><a href="contact.html">Site Map</a></li>
						<li><a href="#">Search Terms</a></li>
						</ul>
				</div>
				<div class="col_1_of_4 span_1_of_4">
					<h4>My account</h4>
						<ul>
							<li><a href="contact.html">Sign In</a></li>
							<li><a href="index.html">View Cart</a></li>
							<li><a href="#">My Wishlist</a></li>
							<li><a href="#">Track My Order</a></li>
							<li><a href="contact.html">Help</a></li>
						</ul>
				</div>
				<div class="col_1_of_4 span_1_of_4">
					<h4>Contact</h4>
						<ul>
							<li><span>+91-123-456789</span></li>
							<li><span>+00-123-000000</span></li>
						</ul>
						<div class="social-icons">
							<h4>Follow Us</h4>
					   		  <ul>
							      <li><a href="#" target="_blank"><img src="/images/icon/facebook.png" alt="" /></a></li>
							      <li><a href="#" target="_blank"><img src="/images/icon/twitter.png" alt="" /></a></li>
							      <li><a href="#" target="_blank"><img src="/images/icon/skype.png" alt="" /> </a></li>
							      <li><a href="#" target="_blank"> <img src="/images/icon/dribbble.png" alt="" /></a></li>
							      <li><a href="#" target="_blank"> <img src="/images/icon/linkedin.png" alt="" /></a></li>
							      <div class="clear"></div>
						     </ul>
   	 					</div>
				</div>
			</div>			
        </div>
    </div>
    <script type="text/javascript">
		function addToCart(goodsId) {
			$.ajax({
			    url:"/home/addToCart.action",
				type:"post",
				dataType:"json",
				data:{
			        userId:"${User.userId}",
					goodsId:goodsId
				},
				success:function (data) {
					if(data.status == "cart_add_success"){
					    confirm("已成功加入购物车");
                    }else if(data.status == "cart_add_failed"){
                        alert("加入购物车失败");
                    }
                },
				error:function (e) {
                    alert("发送加入购物车请求失败："+e);
                }
			});
        }
		function listCategoryGoods(categoryId) {
			$.ajax({
			    url:"/home/category.action",
				type:"post",
				dataType:"json",
				data:{
			        categoryId:categoryId
				},
				success:function (data) {
					if(data.length != 0){
//					    alert(data.length);
                        $(".display").hide();
                        $(".goods_container").empty();
                        showCategoryGoods(data);
					}else{
					    alert("none");
					}
                },
				error:function (e) {
                    alert("获取分类商品失败："+e);
                }
			});
        }
        function listSearchGoods() {
		    var keyword = $("#keyword").val();
		    if(keyword == "" || keyword == "Search"){

			}else{
                $.ajax({
                    url:"/home/search.action",
                    type:"post",
                    dataType:"json",
                    data:{
                        keyword:keyword
                    },
                    success:function (data) {
                        if(data.length != 0){
//					    alert(data.length);
                            $(".display").hide();
                            $(".goods_container").empty();
                            showCategoryGoods(data);
                        }else{
                            alert("none");
                        }
                    },
                    error:function (e) {
                        alert("获取分类商品失败："+e);
                    }
                });
			}
        }
        function showCategoryGoods(data) {
            for(var i=1;i<=data.length;i++){
                var container = $(".goods_model").clone();
                container.removeClass("goods_model");
                $(".detail",container).attr("href","/home/goodsDetail.action?goodsId="+data[i-1].goodsId+"&userId=${User.userId}");
                $(".detail",container).attr("target","_blank");
				$("img",container).attr("src",data[i-1].goodsImage);
				$("h2",container).text(data[i-1].name);
				$(".to_Cart",container).attr("href","javascript:addToCart("+data[i-1].goodsId+")");
				$("p",container).text("￥"+data[i-1].price);
				$(".goods_container").append(container);
				container.show();
				/*if(i>=8){
				    break;
				}*/
			}
			pageListener(data);
        }
        function pageListener(data) {
            $("#page_container").empty();
			var per_page_num = 8;
			var total_num = data.length;
            var page_num = Math.ceil(total_num / per_page_num);
			//var page_num = total_num % per_page_num == 0 ?  total_num / per_page_num : total_num / per_page_num + 1;
			$("#current_page").val(0);
			$("#per_page_num").val(per_page_num);
			var page_html = '<a class="previous_link" href="javascript:previous();">上一页</a>';
            var current_link = 0;
            while(page_num > current_link){
                page_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
                current_link++;
            }
            page_html += '<a class="next_link" href="javascript:next();">下一页</a>';
            $("#page_container").html(page_html);
            $('#page_container .page_link:first').addClass('active_page');
            //隐藏该对象下面的所有子元素
            $('.goods_container').children().css('display', 'none');

            //显示第n（show_per_page）元素
            $('.goods_container').children().slice(0, per_page_num).css('display', 'block');
        }
        function previous(){
            new_page = parseInt($('#current_page').val()) - 1;
            //if there is an item before the current active link run the function
            if($('.active_page').prev('.page_link').length==true){
                go_to_page(new_page);
            }
        }
        function next(){
            new_page = parseInt($('#current_page').val()) + 1;
            //if there is an item after the current active link run the function
            if($('.active_page').next('.page_link').length==true){
                go_to_page(new_page);
            }
        }
        function go_to_page(page_num){
            //get the number of items shown per page
            var per_page_num = parseInt($('#per_page_num').val());

            //get the element number where to start the slice from
            start_from = page_num * per_page_num;

            //get the element number where to end the slice
            end_on = start_from + per_page_num;

            //hide all children elements of content div, get specific items and show them
            $('.goods_container').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

			/*get the page link that has longdesc attribute of the current page and add active_page class to it
			 and remove that class from previously active page link*/
            $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');

            //update the current page input field
            $('#current_page').val(page_num);
        }
		$(document).ready(function() {			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
	</script>
    <a href="#" id="toTop"><span id="toTopHover"> </span></a>
<%--<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>--%>
</body>
</html>

